import * as React from 'react'
import { connect } from 'react-redux';
import { getTask } from '../../actions/task';
import { Card } from 'antd/es';
import TwsReactMarkdownPreview from '../common/markdown/MarkdownPreview'

class TaskDetailBody extends React.Component<any>{

    load = (taskId: number) => {
        this.props.getTask(taskId)
    }

    componentDidMount = () => {
        const { taskId } = this.props
        this.load(taskId)
    }

    componentWillReceiveProps = (nextProps: any) => {
        const { taskId } = nextProps
        if (taskId === this.props.taskId) {
            return false
        }
        this.load(taskId)
        return true
    }

    render() {
        const { task } = this.props
        return <Card title={task.title} noHovering bordered={false}
            key={task.id}
            id='task'>
            <h4>任务卡内容 </h4>
            <div className='markdown-wrap'>
                <TwsReactMarkdownPreview source={task.content} />
            </div>
        </Card>
    }
}

const mapStateToProps = ({ user, task }: { user: any, task: any}) => ({
    user,
    task
})
const mapDispatchToProps = (dispatch: Function) => ({
    getTask: (taskId: number) => dispatch(getTask(taskId))
})

export default connect(mapStateToProps, mapDispatchToProps)((TaskDetailBody))
